<!-- 避灾点 -->
<template>
  <div class="page3">
    <Tree @on-select-change="posi" :data="data5" :render="renderContent" class="demo-tree-render"></Tree>
    <div class="boxsss">
      <Dialog title="更多救援力量" :show.sync="show">
        <div class="tabs">
          <div @click="changetab(index)" :class="{ active: index == currIndex }" v-for="(item, index) in list" :key="index">
            {{ item.title }}
          </div>
        </div>
        <!-- 物资 -->
        <ul class="weather7" v-if="currIndex == 0">
          <li class="table_header">
            <div>类型</div>
            <div>总数</div>
          </li>
          <template v-if="info.wz.length>0">
            <li v-for="(item, index) in info.wz" :key="index">
              <div>{{ item.name }}</div>
              <div>{{ item.num }}</div>
            </li>
          </template>
          <li v-else style="justify-content: center">
            暂无数据
          </li>
        </ul>
        <!-- 队伍 -->
        <ul class="weather7" v-if="currIndex == 1">
          <li class="table_header">
            <div>姓名</div>
            <div>联系电话</div>
          </li>
          <li v-for="(item, index) in dw" :key="index">
            <div>{{ item.name }}</div>
            <div>{{ item.num }}</div>
          </li>
        </ul>
        <!-- 装备 -->
        <ul class="weather7" v-if="currIndex == 2">
          <li class="table_header">
            <div>装备</div>
            <div>总数</div>
          </li>
          <template v-if="info.zb.length>0">
            <li v-for="(item, index) in info.zb" :key="index">
              <div>{{ item.name }}</div>
              <div>{{ item.num }}</div>
            </li>
          </template>
          <li v-else style="justify-content: center">
            暂无数据
          </li>
        </ul>
        <!-- 容纳人数 -->
        <ul class="weather7 rn" v-if="currIndex == 3" style="text-align:center">
          <li class="table_header">
            容纳人数
          </li>
          <li>
            {{ info.rn }}
          </li>
        </ul>
        <div class="paga" v-if="currIndex == 1">
          <span>共<b>{{info.dw.length}}</b>条记录</span>
          <div @click="prev">&lt;上一页</div>
          <div @click="changePage(item)" v-for="(item,index) in allPage" :key="index">{{item}}</div>
          <div @click="next">下一页></div>
        </div>
      </Dialog>
    </div>
  </div>
</template>

<script>
import Dialog from "@/components/dialog.vue";
import { Tree } from "view-design";
export default {
  components: { Tree, Dialog },

  computed: {
    dw() {
      return this.info.dw.slice(9 * (this.page - 1), 9 * this.page)
    },
    allPage() {
      return Math.ceil(this.info.dw.length / 9)
    }
  },

  created() { },

  mounted() { },

  data() {
    return {
      page: 1,
      wzList: [
        {
          name: "专用应急物资及储备",
          num: 100,
        },
        {
          name: "防灾减灾装用物资",
          num: 50,
        },
        {
          name: "基本生活报障",
          num: 100,
        },
        {
          name: "农被",
          num: 100,
        },
        {
          name: "防汛抗旱专用物资",
          num: 80,
        },
        {
          name: "防疫应急专用物资",
          num: 70,
        },
      ],
      dwList: [
        {
          name: "方大雄",
          num: 15869081320,
        },
        {
          name: "方先德",
          num: 15067333921,
        },
        {
          name: "方土标",
          num: 15757059849,
        },
        {
          name: "方少云",
          num: 15068959907,
        },
        {
          name: "方飞",
          num: 13857019061,
        },
        {
          name: "方土祥",
          num: 15167083744,
        },
        {
          name: "郑新根",
          num: 13757059831,
        },
        {
          name: "郑贵富",
          num: 13511420191,
        },
        {
          name: "郑根华",
          num: 18758980230,
        },
        {
          name: "郑根法",
          num: 15957034802,
        },
        {
          name: "郑贤德",
          num: 13857019061,
        },
        {
          name: "姚根标",
          num: 13957922353,
        },
        {
          name: "姚兴标",
          num: 18367024972,
        },
        {
          name: "姚鸿辉",
          num: 15068959550,
        },
        {
          name: "姚奎富",
          num: 13575646884,
        },
        {
          name: "余贤表",
          num: 13567022561,
        },
        {
          name: "方水根",
          num: 15068958243,
        },
        {
          name: "方约新",
          num: 13735053305,
        },
        {
          name: "方先林",
          num: 13819010336,
        },
        {
          name: "余剑",
          num: 15957033045,
        },
        {
          name: "蒋贤良",
          num: 13567022729,
        },
        {
          name: "余利锋",
          num: 13735054578,
        },
        {
          name: "李仙富",
          num: 627581,
        },
        {
          name: "郑家昌",
          num: 13575648364,
        },
        {
          name: "郑小华",
          num: 15167085012,
        },
      ],
      info: {
        wz: [],
        dw: [],
        zb: []
      },
      currIndex: 0,
      list: [
        {
          title: "物资",
        },
        {
          title: "队伍",
        },
        {
          title: "装备",
        },
        {
          title: "容纳",
        },
      ],
      show: false,
      data5: [
        {
          title: "林山乡",
          expand: true,
          // eslint-disable-next-line no-unused-vars
          render: (h, { root, node, data }) => {
            return h(
              "span",
              {
                style: {
                  display: "inline-block",
                  width: "100%",
                },
              },
              [
                h("span", [
                  h("Icon", {
                    props: {
                      type: "ios-briefcase",
                    },
                    style: {
                      color: "#1296DB",
                      marginRight: "8px",
                    },
                  }),
                  h("span", data.title),
                ]),
                h("span", {
                  style: {
                    display: "inline-block",
                    float: "right",
                    marginRight: "32px",
                  },
                }),
              ]
            );
          },
          children: [
            {
              title: "林山乡避灾安置中心",
              expand: true,
              children: [
                {
                  title: "林山乡菖蒲村东坞",
                  expand: true,
                  xy: [118.54156692541088, 29.242826847940005],
                  l: 13,
                  wz: [
                    {
                      name: "床铺（行军床等）",
                      num: 20,
                    },
                    {
                      name: "棉被",
                      num: 20,
                    },
                    {
                      name: "草席",
                      num: 20,
                    },
                    {
                      name: "应急灯（手电）",
                      num: 10,
                    },
                    {
                      name: "雨衣雨鞋",
                      num: 10,
                    },
                    {
                      name: "洗漱用品",
                      num: 20,
                    },
                  ],
                  rn: 150,
                  dw: [
                    {
                      name: "方承岗",
                      num: 18857037390,
                    },
                    {
                      name: "郑良东",
                      num: 13665701208,
                    },
                    {
                      name: "方承华",
                      num: 15857034636,
                    },
                    {
                      name: "方大富",
                      num: 15726998625,
                    },
                    {
                      name: "方大雄",
                      num: 15869081320,
                    },
                    {
                      name: "方先德",
                      num: 15067333921,
                    },
                    {
                      name: "方土标",
                      num: 15757059849,
                    },
                    {
                      name: "方少云",
                      num: 15068959907,
                    },
                    {
                      name: "方飞",
                      num: 13857019061,
                    },
                    {
                      name: "方土祥",
                      num: 15167083744,
                    },
                    {
                      name: "郑新根",
                      num: 13757059831,
                    },
                    {
                      name: "郑贵富",
                      num: 13511420191,
                    },
                    {
                      name: "郑根华",
                      num: 18758980230,
                    },
                    {
                      name: "郑根法",
                      num: 15957034802,
                    },
                    {
                      name: "郑贤德",
                      num: 13857019061,
                    },
                    {
                      name: "姚根标",
                      num: 13957922353,
                    },
                    {
                      name: "姚兴标",
                      num: 18367024972,
                    },
                    {
                      name: "姚鸿辉",
                      num: 15068959550,
                    },
                    {
                      name: "姚奎富",
                      num: 13575646884,
                    },
                    {
                      name: "余贤表",
                      num: 13567022561,
                    },
                    {
                      name: "方水根",
                      num: 15068958243,
                    },
                    {
                      name: "方约新",
                      num: 13735053305,
                    },
                    {
                      name: "方先林",
                      num: 13819010336,
                    },
                    {
                      name: "余剑",
                      num: 15957033045,
                    },
                    {
                      name: "蒋贤良",
                      num: 13567022729,
                    },
                    {
                      name: "余利锋",
                      num: 13735054578,
                    },
                    {
                      name: "李仙富",
                      num: 627581,
                    },
                    {
                      name: "郑家昌",
                      num: 13575648364,
                    },
                    {
                      name: "郑小华",
                      num: 15167085012,
                    },
                  ],
                  zb: []
                },
              ],
            },
            {
              title: "林山乡詹村村避灾安置点",
              expand: true,
              children: [
                {
                  title: "林山乡詹村村东坞",
                  expand: true,
                  xy: [118.51075497, 29.16146233],
                  l: 14,
                  wz: [],
                  rn: 60,
                  dw: [
                    {
                      name: "程先锋",
                      num: 530963,
                    },
                    {
                      name: "徐庆安",
                      num: 514018,
                    },
                    {
                      name: "程峰",
                      num: 611907,
                    },
                    {
                      name: "詹金福",
                      num: 622753,
                    },
                    {
                      name: "刘旗",
                      num: 636804,
                    },
                    {
                      name: "刘章",
                      num: 695707,
                    },
                    {
                      name: "刘中",
                      num: 560605,
                    },
                    {
                      name: "李法标",
                      num: 530142,
                    },
                    {
                      name: "程夏红",
                      num: 564123,
                    },
                    {
                      name: "程林红",
                      num: 553181,
                    },
                    {
                      name: "程仁杰",
                      num: 15336711391,
                    },
                  ],
                  zb: []
                },
              ],
            },
            {
              title: "林山乡禄源村避灾安置点",
              expand: true,
              children: [
                {
                  title: "林山乡禄源村田后",
                  expand: true,
                  xy: [118.54852579, 29.19629892],
                  l: 14,
                  wz: [],
                  rn: 65,
                  dw: [
                    {
                      name: "郑兴川",
                      num: 657691,
                    },
                    {
                      name: "徐土林",
                      num: 553631,
                    },
                    {
                      name: "郑家兵",
                      num: 637081,
                    },
                    {
                      name: "郑家龙",
                      num: 657722,
                    },
                    {
                      name: "郑真谷",
                      num: 530000,
                    },
                    {
                      name: "郑兴利",
                      num: 694251,
                    },
                    {
                      name: "郑家云",
                      num: 553025,
                    },
                    {
                      name: "王兴林",
                      num: 537557,
                    },
                    {
                      name: "郑能荣",
                      num: 612001,
                    },
                    {
                      name: "祝俊兴",
                      num: 651927,
                    },
                    {
                      name: "徐土云",
                      num: 695388,
                    },
                    {
                      name: "徐新水",
                      num: 726972,
                    },
                  ],
                  zb: []
                },
              ],
            },
            {
              title: "林山乡利平村避灾安置点",
              expand: true,
              children: [
                {
                  title: "林山乡利平村",
                  expand: true,
                  xy: [118.45201286, 29.15107603],
                  l: 14,
                  wz: [],
                  rn: 50,
                  dw: [
                    {
                      name: "李建华",
                      num: 15924085046,
                    },
                    {
                      name: "吴旭",
                      num: 681392,
                    },
                    {
                      name: "邹寿贵",
                      num: 15857033522,
                    },
                    {
                      name: "汪勇军",
                      num: 18357071548,
                    },
                    {
                      name: "范连德",
                      num: 15857088083,
                    },
                    {
                      name: "吾德陆",
                      num: 15857036863,
                    },
                    {
                      name: "邹樟土",
                      num: 544045,
                    },
                    {
                      name: "江根土",
                      num: 668410,
                    },
                    {
                      name: "徐根普",
                      num: 18305002539,
                    },
                    {
                      name: "江西土",
                      num: 631795,
                    },
                  ],
                  zb: []
                },
              ],
            },
            {
              title: "林山乡菖蒲村避灾安置点",
              expand: true,
              children: [
                {
                  title: "菖蒲村菖蒲自然村",
                  expand: true,
                  xy: [118.54358323456555, 29.23015420169645],
                  l: 14,
                  wz: [],
                  rn: 90,
                  dw: [
                    {
                      name: "方承岗",
                      num: 18857037390,
                    },
                    {
                      name: "郑良东",
                      num: 13665701208,
                    },
                    {
                      name: "方承华",
                      num: 15857034636,
                    },
                    {
                      name: "方大富",
                      num: 15726998625,
                    },
                    {
                      name: "方大雄",
                      num: 15869081320,
                    },
                    {
                      name: "方先德",
                      num: 15067333921,
                    },
                    {
                      name: "方土标",
                      num: 15757059849,
                    },
                    {
                      name: "方少云",
                      num: 15068959907,
                    },
                    {
                      name: "方飞",
                      num: 13857019061,
                    },
                    {
                      name: "方土祥",
                      num: 15167083744,
                    },
                    {
                      name: "郑新根",
                      num: 13757059831,
                    },
                    {
                      name: "郑贵富",
                      num: 13511420191,
                    },
                    {
                      name: "郑根华",
                      num: 18758980230,
                    },
                    {
                      name: "郑根法",
                      num: 15957034802,
                    },
                    {
                      name: "郑贤德",
                      num: 13857019061,
                    },
                    {
                      name: "姚根标",
                      num: 13957922353,
                    },
                    {
                      name: "姚兴标",
                      num: 18367024972,
                    },
                    {
                      name: "姚鸿辉",
                      num: 15068959550,
                    },
                    {
                      name: "姚奎富",
                      num: 13575646884,
                    },
                    {
                      name: "余贤表",
                      num: 13567022561,
                    },
                    {
                      name: "方水根",
                      num: 15068958243,
                    },
                    {
                      name: "方约新",
                      num: 13735053305,
                    },
                    {
                      name: "方先林",
                      num: 13819010336,
                    },
                    {
                      name: "余剑",
                      num: 15957033045,
                    },
                    {
                      name: "蒋贤良",
                      num: 13567022729,
                    },
                    {
                      name: "余利锋",
                      num: 13735054578,
                    },
                    {
                      name: "李仙富",
                      num: 627581,
                    },
                    {
                      name: "郑家昌",
                      num: 13575648364,
                    },
                    {
                      name: "郑小华",
                      num: 15167085012,
                    },
                  ],
                  zb: []
                },
              ],
            },
            {
              title: "林山乡霞湖村避灾安置点",
              expand: true,
              children: [
                {
                  title: "霞湖（原大会堂）",
                  expand: true,
                  xy: [118.51600155, 29.17330326],
                  l: 13,
                  wz: [
                    {
                      name: "床铺（行军床等）",
                      num: 20,
                    },
                    {
                      name: "棉被",
                      num: 20,
                    },
                    {
                      name: "草席",
                      num: 20,
                    },
                    {
                      name: "应急灯（手电）",
                      num: 5,
                    },
                    {
                      name: "雨衣雨鞋",
                      num: 5,
                    },
                    {
                      name: "洗漱用品",
                      num: 20,
                    },
                  ],
                  rn: 50,
                  dw: [
                    {
                      name: "詹性水",
                      num: 13735089050,
                    },
                    {
                      name: "詹根红",
                      num: 13587110929,
                    },
                    {
                      name: "詹土兵",
                      num: 15857036055,
                    },
                    {
                      name: "詹守海",
                      num: 15068959557,
                    },
                    {
                      name: "詹正龙",
                      num: 13958441604,
                    },
                    {
                      name: "詹性水",
                      num: 13735089050,
                    },
                    {
                      name: "刘双全",
                      num: 15068930539,
                    },
                    {
                      name: "蒋孝忠",
                      num: 15757056469,
                    },
                    {
                      name: "蒋禄兴",
                      num: 15167086081,
                    },
                    {
                      name: "蒋先良",
                      num: 15168271470,
                    },
                    {
                      name: "汪小水",
                      num: 13706709283,
                    },
                  ],
                  zb: []
                },
              ],
            },
            {
              title: "林山乡塘源口村避灾安置点",
              expand: true,
              children: [
                {
                  title: "举塘（原小学）",
                  expand: true,
                  xy: [118.53978101985605, 29.255124828767364],
                  l: 13,
                  wz: [
                    {
                      name: "床铺（行军床等）",
                      num: 20,
                    },
                    {
                      name: "棉被",
                      num: 20,
                    },
                    {
                      name: "草席",
                      num: 20,
                    },
                    {
                      name: "应急灯（手电）",
                      num: 5,
                    },
                    {
                      name: "雨衣雨鞋",
                      num: 5,
                    },
                    {
                      name: "洗漱用品",
                      num: 20,
                    },
                  ],
                  rn: 60,
                  dw: [
                    {
                      name: "徐土松",
                      num: 18367023350,
                    },
                    {
                      name: "张火土",
                      num: 15757057162,
                    },
                    {
                      name: "操根土",
                      num: 13587112097,
                    },
                    {
                      name: "夏海军",
                      num: 590710,
                    },
                    {
                      name: "江普田",
                      num: 18758982280,
                    },
                    {
                      name: "丁林利",
                      num: 15157068559,
                    },
                    {
                      name: "刘海军",
                      num: 15257003581,
                    },
                    {
                      name: "江光福",
                      num: 13511423197,
                    },
                    {
                      name: "丁小青",
                      num: 13336969113,
                    },
                    {
                      name: "郑金旺",
                      num: 13750701079,
                    },
                  ],
                  zb: []
                },
              ],
            },
            {
              title: "林山乡江家村避灾安置点",
              expand: true,
              children: [
                {
                  title: "江家村村委会",
                  expand: true,
                  xy: [118.53978101985605, 29.255124828767364],
                  l: 13,
                  wz: [
                    {
                      name: "床铺（行军床等）",
                      num: 20,
                    },
                    {
                      name: "棉被",
                      num: 20,
                    },
                    {
                      name: "草席",
                      num: 20,
                    },
                    {
                      name: "应急灯（手电）",
                      num: 10,
                    },
                    {
                      name: "雨衣雨鞋",
                      num: 10,
                    },
                    {
                      name: "洗漱用品",
                      num: 20,
                    },
                  ],
                  rn: 60,
                  dw: [
                    { name: "江五月古", num: 15924080505 },
                    { name: "郑丰良", num: 15257006421 },
                    { name: "徐谷友", num: 13750706216 },
                    { name: "江仁爱", num: 13757016269 },
                    { name: "徐家仙", num: 13757018575 },
                    { name: "方三龙", num: 13675706204 },
                    { name: "方龙如", num: 18367023353 },
                    { name: "江水兵", num: 13867027407 },
                    { name: "江芳建", num: 13575644103 },
                    { name: "江塘女", num: 13735088736 },
                    { name: "徐先根", num: 15958446895 },
                    { name: "张爱玲", num: 746187 },
                    { name: "江夏中", num: 13867025636 },
                  ],
                  zb: []
                },
              ],
            },
          ],
        },
      ],
      oldX: "",
    };
  },
  methods: {
    changePage(page) {
      this.page = page
    },
    // eslint-disable-next-line no-unused-vars
    renderContent(h, { root, node, data }) {
      var color = "#2BD3CF";
      var type = "logo-dropbox";
      if (node.children) {
        color = "#1296DB";
        type = "ios-briefcase";
      }
      return h(
        "span",
        {
          style: {
            color: "#fff",
            display: "inline-block",
            width: "100%",
          },
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type,
              },
              style: {
                marginRight: "8px",
                color,
              },
            }),
            h("span", data.title),
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "0px",
              },
            },
            [
              h("Icon", {
                props: {
                  type: "ios-radio-button-off",
                },
                style: {
                  marginRight: "8px",
                  color,
                },
              }),
            ]
          ),
        ]
      );
    },
    changetab(i) {
      if (i == this.currIndex) return;
      this.currIndex = i;
    },
    prev() {
      console.log(this.page);
      if (this.page != 1) {
        this.page--;
      }
    },
    next() {
      if (this.page != this.allPage) {
        this.page++;
      }
    },
    posi(e) {
      console.log(e[0]);
      if (e[0].children) return
      if (this.oldX == e[0].xy[0]) {
        this.show = true;
        return;
      }
      this.page = 1
      this.currIndex = 0
      this.info = e[0]
      this.show = false;
      this.oldX = e[0].xy[0];
      this.$parent.posiAddr(e[0], () => {
        this.show = true;
      }, e[0].l);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.ivu-tree-title {
  width: 100%;
}
/deep/.ivu-tree-title {
  color: #fff;
  i.ivu-icon-ios-folder-outline {
    color: #2bd3cf;
  }
}
/deep/.ivu-tree-title-selected,
.ivu-tree-title-selected:hover,
/deep/.ivu-tree-title:hover {
  i + span {
    color: #2bd3cf;
  }
}
.page3 {
  height: 100%;
  overflow: auto;
  .boxsss {
    .tabs {
      display: flex;
      div {
        cursor: pointer;
        width: 33%;
        border: 1px solid #06586d;
        text-align: center;
        margin-bottom: 20px;
        padding: 2px 0;
      }
      div.active {
        background-color: #45dbfb;
      }
      div:first-child {
        border-radius: 12px 0 0 12px;
      }
      div:last-child {
        border-radius: 0 12px 12px 0;
      }
    }
    .weather7 {
      height: 305px;
      width: 380px;
      li {
        display: flex;
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 30px;
        & > div:first-child {
          width: 50%;
          text-align: center;
          margin-right: 25%;
        }
        & > div:last-child {
          width: 25%;
          text-align: center;
        }
      }
      li:nth-child(even) {
        background-color: rgba(0, 0, 0, 0.3);
      }
      li.table_header {
        background: #06424f;
        border: 1px solid #06586d;
        height: 25px;
        line-height: 25px;
        margin-bottom: 10px;
        box-shadow: 6px 0 10px #056a68 inset, -6px 0 10px #056a68 inset;
      }
    }
    .weather7.rn {
      li {
        justify-content: center;
      }
    }
    .paga {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      div {
        border: 1px solid #06586d;
        font-size: 12px;
        min-width: 20px;
        cursor: pointer;
        text-align: center;
        margin: 0 5px;
        color: #24899b;
        padding: 0 5px;
      }
    }
  }
}
</style>
